<template>
  <a-modal
    v-model:visible="visible"
    title-align="start"
    width="800px"
    :title="formModel.processId? '详细': '新增'"
    :mask-closable=false
    :ok-loading=true
    :draggable=true
  >
    <a-scrollbar style="max-height:600px; overflow: auto;">
      <a-form
        id="addForm"
        ref="formModelRef"
        label-align="left"
        layout="vertical"
        :label-col-props=labelColProps
        :wrapper-col-props=wrapperColProps
        :model="formModel"
        :rules="rules"
      >
        <a-row justify="space-between">
          <a-col :span="24">
            <a-form-item field="processName" label="流程名称">
              <a-input
                v-model="formModel.processName"
                placeholder="请输入流程名称"
                show-word-limit
                allow-clear
                :max-length="30"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item field="processKey" label="流程KEY">
              <a-input
                v-model="formModel.processKey"
                placeholder="请输入流程KEY"
                show-word-limit
                allow-clear
                :disabled="formModel.processId"
                :max-length="50"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item field="processGroupId" label="所属流程组">
              <a-select
                v-model="formModel.processGroupId"
                popup-container="#addForm"
                placeholder="请选择流程组"
                allow-clear
                :options="processGroupOptions"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item field="formId" label="绑定表单">
              <a-select
                v-model="formModel.formId"
                popup-container="#addForm"
                placeholder="请选择绑定表单"
                allow-clear
                :options="formOptions"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item field="processAdmin" label="流程管理员">
              <user-select
                v-model="formModel.processAdmin"
                :multiple="false"
              />
            </a-form-item>
          </a-col>
          <!--
          <a-col :span="11">
            <a-form-item
              field="processVersion"
              tooltip=""
              label="流程版本"
              validate-trigger="blur"
            >
              <a-input
                v-model="formModel.processVersion"
                placeholder=""
              />
            </a-form-item>
          </a-col>
          -->
        </a-row>
      </a-form>
    </a-scrollbar>
    <template #footer>
      <a-row justify="end">
        <a-button-group>
          <a-button :disabled="loading" @click="cancel">
            取消
          </a-button>
          <a-button
            type="primary"
            :loading="loading"
            :disabled="hasUpdatePermission"
            @click="submit"
          >
            确定
          </a-button>
        </a-button-group>
      </a-row>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineExpose, computed } from 'vue';
import { addProcess, updateProcess, detailProcess, FlowProcess } from '@/api/flow/process';
import { selectProcessGroup } from '@/api/flow/process-group';
import { selectForm } from '@/api/system/form';
import { hasPermission } from '@/utils/permission';
import { rules, permission } from '@/views/flow/process/config';
import { labelColProps, wrapperColProps } from '@/components/dialog-add/config';
import { Message, SelectOption, ValidatedError } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import UserSelect from '@/components/business-select/user-select.vue';

const emits = defineEmits(['submit']);

const { loading, setLoading } = useLoading(false);

const formModelRef = ref();

const visible = ref<boolean>(false);

const formDisable = ref<boolean>(false);

const formModel = ref<FlowProcess>({});

const processGroupOptions = ref<SelectOption[]>();

const formOptions = ref<SelectOption[]>();

const hasUpdatePermission = computed(() => {
  return formModel.value.processGroupId && !hasPermission([permission.PERMISSION_UPDATE]);
});

const submit = async () => {
  formModelRef.value.validate((errors: undefined | Record<string, ValidatedError>) => {
    if (errors) {
      return;
    }
    setLoading(true);
    if (formModel.value.processId) {
      updateProcess(formModel.value).then(() => {
        submitSuccess();
      }).finally(() => {
        setLoading(false);
      });
      return;
    }
    addProcess(formModel.value).then(() => {
      submitSuccess();
    }).finally(() => {
      setLoading(false);
    });
  });
};

const submitSuccess = () => {
  cancel();
  emits('submit');
  Message.success('操作成功');
};

const open = async (record: FlowProcess, disable: boolean) => {
  visible.value = true;
  const groupRes = await selectProcessGroup();
  processGroupOptions.value = groupRes.data;
  const formRes = await selectForm();
  formOptions.value = formRes.data;
  if (record && record.processId) {
    const { data } = await detailProcess(record.processId);
    formModel.value = data;
  } else {
    formModel.value = {};
  }
  formDisable.value = disable;
  formModelRef.value.clearValidate();
  setLoading(false);
};

const cancel = () => {
  visible.value = false;
};

defineExpose({
  open,
  cancel
});
</script>

<script lang="ts">
export default {
  name: 'ProcessDialogAdd'
};
</script>

<style scoped lang="less">

</style>